function Big(ops){
    // 选择元素
    this.sBox = ops.sBox;
    this.sBspan = ops.sBspan;
    this.bBox = ops.bBox;
    this.bBimg = ops.bBimg;
    // 绑定事件
    this.addEvent()
}
Big.prototype.addEvent = function(){
    const that = this;
    // 绑定进入
    this.sBox.onmouseover = function(){
        // 显示
        that.show()
    }
    // 绑定离开
    this.sBox.onmouseout = function(){
        // 隐藏
        that.hide()
    }
    // 绑定移动
    this.sBox.onmousemove = function(eve){
        const e = eve || window.event;
        // 移动
        that.move(e);
    }
}
Big.prototype.show = function(){
    this.bBox.style.display = "block";
    this.sBspan.style.display = "block";
    // 设置span的尺寸
    // 提醒一定要在显示之后设置，否则，显示之前无法获取css样式
    // 提前获取各种尺寸
    this.sbw = this.sBox.offsetWidth;
    this.sbh = this.sBox.offsetHeight;
    this.bbiw = this.bBimg.offsetWidth;
    this.bbih = this.bBimg.offsetHeight;
    this.bbw = this.bBox.offsetWidth;
    this.bbh = this.bBox.offsetHeight;

    // 计算并设置span的尺寸
    this.sBspan.style.width = this.sbw / (this.bbiw / this.bbw) + "px";
    this.sBspan.style.height = this.sbh / (this.bbih / this.bbh) + "px";
}
Big.prototype.hide = function(){
    this.bBox.style.display = "none";
    this.sBspan.style.display = "none";
}
Big.prototype.move = function(e){
    // 计算当前移动的距离
    let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth;
    let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight;
    // 边界限定
    if(l < 0) l = 0;
    if(t < 0) t = 0;
    if(l > this.sbw - this.sBspan.offsetWidth){
        l = this.sbw - this.sBspan.offsetWidth
    }
    if(t > this.sbh - this.sBspan.offsetHeight){
        t = this.sbh - this.sBspan.offsetHeight
    }

    // 设置span的跟随效果
    this.sBspan.style.left = l + "px";
    this.sBspan.style.top = t + "px";

    // 计算比例
    // 当前移动的距离 / 一共能移动的距离
    let x = l / (this.sbw - this.sBspan.offsetWidth);
    let y = t / (this.sbh - this.sBspan.offsetHeight);
    // console.log(x, y)

    // 跟随移动
    // 当前移动的距离 = 总距离 * 比例
    this.bBimg.style.left = (this.bbw - this.bbiw) * x + "px";
    this.bBimg.style.top = (this.bbh - this.bbih) * y + "px";
}
new Big({
    sBox:document.querySelector(".s_box"),
    bBox:document.querySelector(".b_box"),
    bBimg:document.querySelector(".b_box img"),
    sBspan:document.querySelector(".s_box span")
});


var d1 = document.querySelectorAll(".d1 img");
var osm = document.querySelector(".s_box img"); 
var obm = document.querySelector(".b_box img")
for(var i=0;i<d1.length;i++){
    d1[i].onclick = function(){
        console.log(osm.src)
        osm.src = this.src
        obm.src=this.src;
    }
}